<style lang="less" scoped>
// .video-control {
//     background: rgba(0, 0, 0, 0.2);
// }
.smoke-alarm-plan {
  position: relative;
  background: rgba(0, 0, 0, 0.5);
  &.fixed {
    position: fixed;
    left: 10%;
    top: 10vh;
    z-index: 9999;
    width: 80%;
    height: 80vh;
    background: #00245f;
    border-radius: 10px;
  }

  .zoom-btn {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 10;
  }
}
</style>
<template>
  <!-- <el-dialog
        @close="closeAction"
        :visible="visible"
        title="烟感设备报警详情"
        :width="1500 * scale + 'px'"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        destroy-on-close
        append-to-body
    > -->
  <div class="alarm-medias">
    <div class="monitor-blk" ref="monitorBlk">
      <div class="video-list flex wrap" v-if="videoList.length > 0">
        <div
          v-if="videoList.length == 1"
          class="flex-1"
          :style="{
            width: videoWidth + 'px',
            height: videoHeight + 'px',
          }"
        >
          <livePlayer
            v-for="(item, index) in videoList"
            :key="index"
            :options="item"
            :initRender="true"
          ></livePlayer>
        </div>
        <template v-else-if="videoList.length > 1">
          <div
            class="video-item"
            v-for="(item, index) in videoList"
            :key="index"
            :style="{
              width: videoWidth / 2 + 'px',
              height: videoHeight / 2 + 'px',
            }"
          >
            <livePlayer
              :src="item"
              :index="index"
              :options="item"
              :initRender="true"
            ></livePlayer>
          </div>
        </template>
      </div>
      <p class="data-none" v-else-if="!loading">暂无监控视频</p>
      <!-- <div
        id="videoControl"
        class="video-control"
        :style="{
          width: videoWidth + 'px',
          height: videoHeight + 'px',
          margin: '0 auto',
        }"
        v-if="monitorList.length > 0"
      ></div> -->
    </div>
    <div
      class="smoke-alarm-plan mt-10"
      :class="{ fixed: isZoomIn }"
      v-if="planeGraphDetail"
    >
      <el-button
        class="zoom-btn"
        type="primary"
        @click="zoomInAction"
        v-if="!isZoomIn"
      >
        点击放大
      </el-button>
      <el-button class="zoom-btn" type="primary" @click="zoomOutAction" v-else>
        点击缩小
      </el-button>
      <floorMarker
        :img="planeGraphDetail.path"
        :style="{ height: planHeight + 'px' }"
        :coordList="planeGraphDetail.coordinateData"
        ref="floorMarker"
      ></floorMarker>
    </div>
  </div>
  <!-- </el-dialog> -->
</template>

<script>
import { mapState } from "vuex";
import utils from "@/assets/js/utils";
import floorMarker from "@/components/archive/FloorMarker";
import livePlayer from "@/components/screenVideoPlayer/player";
export default {
  name: "SmokeAlarmModal",
  components: { floorMarker, livePlayer },
  props: {
    visible: {
      type: Boolean,
    },
    planeGraphDetail: {
      type: Object,
      default() {
        return null;
      },
    },
    monitorList: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  computed: {
    ...mapState(["scale", "winSize"]),
    planHeight() {
      if (this.isZoomIn) {
        return this.winSize.winH * 0.8;
      } else {
        return 400 * this.scale;
      }
    },
  },
  data() {
    return {
      videoWidth: 100,
      videoHeight: 100,
      currentWinId: 0,
      totalWin: 16,
      isZoomIn: false,
      videoList: [],
      loading: false,
      productId: "",
    };
  },
  created() {
    // console.log("12121")
    // console.log(this.planeGraphDetail)
  },

  mounted() {
    this.$nextTick(() => {
      this.videoWidth = this.$refs.monitorBlk.clientWidth;
      this.videoHeight = (this.videoWidth * 9) / 16;
      if (this.monitorList.length > 0) {
        // this.initControl()
        this.getVideoList();
      }
    });
  },
  methods: {
    formatVideoOptions(url, playType, number) {
      const typeMap = this.config.videoTypeMap;
      const options = {
        playType,
        sources: [
          {
            src: url,
            type: typeMap[playType],
          },
        ],
        number,
        productId: this.productId || "",
      };
      return options;
    },
    getVideoList() {
      this.videoList = [];
      this.monitorList.forEach((item) => {
        this.getCameraDetail(item.deviceId, item.cameraNumber);
      });
    },
    getCameraDetail(id, number) {
      this.loading = true;
      this.$get("/fireFightingIOT/device/detail", {
        deviceClassify: "3",
        number,
        id: "",
      }).then(
        (res) => {
          this.loading = false;
          let deviceDetail = res.data;
          this.productId = deviceDetail.productId;
          if (deviceDetail.videoplayAddr) {
            this.videoList.push(
              this.formatVideoOptions(
                deviceDetail.videoplayAddr,
                deviceDetail.playType,
                number
              )
            );
          } else if (deviceDetail.videoplayAddrList.length > 0) {
            this.videoList = deviceDetail.videoplayAddrList.map((item) => {
              return this.formatVideoOptions(
                item,
                deviceDetail.playType,
                number
              );
            });
          } else {
            this.getVideoStream(number, deviceDetail.playType);
          }
        },
        (err) => {
          this.loading = true;
          if (err.msg) {
            this.$message.error(err.msg);
          }
        }
      );
    },
    getVideoStream(number, playType) {
      this.$get("/fireFightingIOT/device/getVideoStream", { number })
        .then((res) => {
          if (res.data) {
            this.videoList.push(this.formatVideoOptions(res.data, playType,number));
          }
        })
        .catch((err) => {
          this.$message.error(err.msg || "系统错误");
        });
    },
    zoomInAction() {
      this.isZoomIn = true;
      // this.clearVideo()
      this.$nextTick(() => {
        this.$refs.floorMarker.computeSize();
      });
    },
    zoomOutAction() {
      this.isZoomIn = false;
      this.initControl();
      this.$nextTick(() => {
        this.$refs.floorMarker.computeSize();
      });
    },
    closeAction() {
      // this.clearVideo()
      this.$emit("update:visible", false);
    },
    clearVideo() {
      if (oWebControl) {
        oWebControl.JS_HideWnd();
        oWebControl.JS_Disconnect();
      }
    },
    startPreview(cameraIndexCode) {
      var cameraIndexCode = cameraIndexCode; //获取输入的监控点编号值，必填
      var streamMode = 0; //主子码流标识：0-主码流，1-子码流
      var transMode = 1; //传输协议：0-UDP，1-TCP
      var gpuMode = 0; //是否启用GPU硬解，0-不启用，1-启用
      // var wndId = winId || -1 //播放窗口序号（在2x2以上布局下可指定播放窗口）

      cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");
      cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, "");

      oWebControl.JS_RequestInterface({
        funcName: "startPreview",
        argument: JSON.stringify({
          cameraIndexCode: cameraIndexCode, //监控点编号
          streamMode: streamMode, //主子码流标识
          transMode: transMode, //传输协议
          gpuMode: gpuMode, //是否开启GPU硬解
          // wndId: wndId, //可指定播放窗口
        }),
      });
    },
    initControl() {
      const monitorNumber = this.monitorList.length;
      let layout = "1x1";
      if (monitorNumber == 2) {
        layout = "1x2";
      } else if (monitorNumber == 3) {
        layout = "1+2";
      } else if (monitorNumber == 4) {
        layout = "2x2";
      }
      this.initVideoWebPlugin(
        {
          containerId: "videoControl",
          width: this.videoWidth,
          height: this.videoHeight,
          layout: layout,
        },
        () => {
          this.monitorList.forEach((item) => {
            this.startPreview(item.cameraNumber);
          });
          // this.startPreview(this.number)
        }
      );
    },
  },
};
</script>
